<template>
  <div>
    <el-input v-model="inputVal"></el-input>
    <el-button @click="onSearch">搜索</el-button>
    <MyTable ref="MyTable" :data="tableObj" :list="list" :border="true" :stripe="true" @changePage="changePage"></MyTable>
    <!-- <MyTable ref="MyTable" :data="tableObj" :border="true" :stripe="true" @changePage="changePage"></MyTable> -->
    <el-button @click="getRef">
      获取Table的ref
    </el-button>
  </div>
</template>

<script>
import { getNodeMyTableList } from '@/utils/api.js'
import axios from 'axios';
export default {
  components: {
    MyTable: () => import('@/components/MyTable.vue')
  },
  data () {
    return {
      cusTableObj: {
        columns: [
          {prop: 'fnsku', label: 'fnsku', width: '180', type: 'slot', slot_name: 'fnsku_slot'}, // 定义标题列是插槽
          {prop: 'name', label: '是否是时令性产品', width: '180'},
          {prop: 'id', label: '活动增量', width: '180'},
          {prop: 'prediction', label: '销量预测', width: '180'},
        ],
        total: 0,
        pageParams: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      tableObj: {
        http: {
          // 这个url你们需要写成完整的url
          url: '/logisticSalesPrediction/list',
          params: {},
          // url返回结果的数据结构,
          result: {
            // 表格内容表示是在result.records中获取
            list: 'list',
            // 数据量总数是在result.total中获取
            total: 'total'
          }
        },
        pageSizes: [10,20],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        // 数据列 - 即el-table-column组件中的属性
        columns: [
          {prop: 'fnsku', label: 'fnsku', width: '180', type: 'slot', slot_name: 'fnsku_slot'}, // 定义标题列是插槽
          {prop: 'name', label: '是否是时令性产品', width: '180'},
          {prop: 'id', label: '活动增量', width: '180'},
          {prop: 'prediction', label: '销量预测', width: '180'},
        ]
      },
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // params: {
      //   pageNum: 1,
      //   pageSize: 10
      // },
      list: [],
      inputVal: ''
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    // 内部调用接口
    // onSearch() {
    //   this.tableObj.http.params = {
    //     val: this.inputVal
    //   }
    // },
    // 外部调用接口
    onSearch() {
      this.getTableList()
    },
    changePage(pageParams) {
      let { pageNum, pageSize } = pageParams
      this.tableObj.pageNum = pageNum
      this.tableObj.pageSize = pageSize
      this.getTableList()
    },
    getTableList() {
      // 使用mockjs模拟接口,在控制台的NetWork中不显示
      // axios({
      //   method: "get",
      //   url: '/mock/myTable/list',
      //   data: {
      //     pageSize: this.tableObj.pageSize, // 一页多少条
      //     pageNum: this.tableObj.pageNum // 第几页
      //   }
      // })

      // 使用node写接口, 可以在Network中看到
      getNodeMyTableList(
        {
          pageNum:  this.tableObj.pageNum,
          pageSize: this.tableObj.pageSize,
          val: this.inputVal
        }
      )
      .then(res => {
        console.log("🚀 ~ getTableList ~ res:父组件", res)
        this.list = res.data.list
        this.tableObj.total = res.data.total
      })
    },
    getRef() {
      console.log('this.$refs.MyTable',this.$refs.MyTable);
      axios({
        method: "get",
        url: '/mock/myTable/list',
        data: {
          pageSize: 1, // 一页多少条
          pageNum: 10 // 第几页
        }
      })
    },
    onSelect(val, row) {
      console.log('master贮藏',"🚀 ~ onSelect ~ val, row:", val, row)
      console.log('测试本地推送---撤回113');
    }
  },
}

</script>
<style scoped lang='less'>
</style>